<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- .{keyAlias}：只在指定按键按下时触发，常用别名有enter、tab、delete(Delete和Backspace)、esc、space、up、down、left、right、ctrl、alt、shift、meta(Command或Windows) -->
      <!-- 按enter键、按delete键 -->
      <button @click.enter="console.log('click.enter')">click.enter</button>
      <!-- 按enter键、按delete键、同时按enter键和alt键 -->
      <button @keydown.enter="(event)=>{console.log(event.key)}">keydown.enter</button>
      <!-- 按enter键、按tab键、按delete键、同时按enter键和alt键 -->
      <button @keydown.enter.tab.delete="(event)=>{console.log(event.key)}">keydown.enter.tab.delete</button>
      
      <!-- .{kebab-case}：只在指定按键按下时触发，使用KeyboardEvent.key暴露的按键名作为修饰符 -->
      
      <!-- .exact：只在指定按键按下且仅按下指定按键时触发 -->
      <!-- 按enter键、按delete键、同时按enter键和alt键 -->
      <button @keydown.enter.exact="(event)=>{console.log(event.key)}">keydown.enter.exact</button>
      <!-- 按enter键、按delete键、同时按enter键和alt键 -->
      <button @keydown.enter.delete.exact="(event)=>{console.log(event.key)}">keydown.enter.delete.exact</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp().mount('#app');
  </script>
</html>